<template>
	<a-modal v-model:visible="visible" width="640px" draggable :title="`${dialogTitle}日程`" @ok="handleConfirmSubmit">
		<a-form ref="form" :model="formData" :rules="formRules" auto-label-width>
			<a-form-item field="title" label="日程标题">
				<a-input v-model="formData.title" placeholder="请输入日程标题" />
			</a-form-item>
			<a-form-item field="content" label="日程详情">
				<a-textarea v-model="formData.content" :auto-size="{ minRows: 2 }" placeholder="请输入日程详情" />
			</a-form-item>
			<a-form-item field="members" label="参与人员">
				<a-input-tag v-model="formData.members" placeholder="请选择人员" readonly />
				<a-button @click="handleSelectUser">选择人员</a-button>
			</a-form-item>
			<a-form-item field="date" label="参与时间">
				<a-date-picker v-model="formData.date" showTime placeholder="请选择参与时间" />
			</a-form-item>
			<a-form-item field="address" label="地点">
				<a-input v-model="formData.address" placeholder="请输入地点" />
			</a-form-item>
			<a-form-item field="remind" label="提醒方式">
				<a-checkbox-group v-model="formData.remind">
					<a-checkbox value="1">平台</a-checkbox>
					<a-checkbox value="2">邮件</a-checkbox>
					<a-checkbox value="3">短信</a-checkbox>
				</a-checkbox-group>
			</a-form-item>
		</a-form>
		<select-user-dialog v-model="selectDialog" @selected="handleSelectedUser"></select-user-dialog>
	</a-modal>
</template>

<script lang="ts" setup>
import selectUserDialog from './selectUserDialog.vue';
import { ref, reactive, computed, watch } from 'vue';
interface formDataType {
	title?: string;
	content?: string;
	members?: string[];
	date?: string;
	address?: string;
	remind?: string[];
}
const visible = defineModel<boolean>();
const props = defineProps<{ dataId: any }>();
const form = ref<HTMLDivElement | null>(null);
const addOrEdit = computed(() => !props.dataId);
const dialogTitle = computed(() => (addOrEdit.value ? '新增' : '编辑'));
const formData = reactive<formDataType>({});
const formRules = reactive({
	title: [{ required: true, message: '请输入日程名称', trigger: 'blur' }],
	content: [{ required: true, message: '请输入日程详情', trigger: 'blur' }]
});
const selectDialog = ref<boolean>(false);

const handleConfirmSubmit = () => {
	console.log(formData);
	visible.value = false;
};
//选择人员
const handleSelectUser = () => {
	selectDialog.value = true;
};
//选中的人员
const handleSelectedUser = (data: any) => {
	console.log(data);
};

watch(visible, (flag) => {
	if(flag) return false;
	console.log(form);
	form.value?.resetFields();
});
</script>

<style lang="scss" scoped></style>
